<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .file {
            border: dashed 1px gray;
            width: 400px;
            height: 400px;
            text-align: center;
        }
    </style>
</head>
<body>
<ol>
    <li>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</li>
    <li>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</li>
    <li>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</li>
    <li>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</li>
</ol>
<input class="file" id="file" type="file" multiple>
<script>
    function dragEnter(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.style.borderColor = 'blue';
        console.log('mouseEnter', e);
    }

    function dragLeave(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.style.borderColor = 'gray';
        console.log('mouseLeave', e);
    }

    function drop(e) {
        e.stopPropagation();
        // e.preventDefault();
        console.log('drop', e.dataTransfer.files);
    }

    const fileDom = document.getElementById('file');
    fileDom.addEventListener('dragenter', dragEnter, false);
    fileDom.addEventListener('dragleave', dragLeave, false);
    fileDom.addEventListener('drop', drop, false);
</script>
</body>
</html>